<template>
  <el-table :data="menus" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }">
    <el-table-column prop="id" label="#ID"></el-table-column>
    <el-table-column prop="label" label="标签"></el-table-column>
    <el-table-column prop="menuName" label="路由名称">
      <template slot-scope="scope">
        <span>{{ scope.row.menuName ? scope.row.menuName : '无' }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="isFrame" label="是否外链">
      <template slot-scope="scope">
        <span>{{ scope.row.isFrame == 1 ? '否' : '是' }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="menuType" label="菜单类型">
      <template slot-scope="scope">
        <el-tag v-if="scope.row.menuType==0">目录</el-tag>
        <el-tag v-if="scope.row.menuType==1" type="success">菜单</el-tag>
        <el-tag v-if="scope.row.menuType==2" type="warning">按钮</el-tag>
        <el-tag v-if="scope.row.menuType==3">根菜单</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-tooltip class="item" effect="dark" :content="'编辑'" placement="top">
          <el-button type="primary" icon="el-icon-edit" size="small" @click="updateMenu(scope.row)" circle></el-button>
        </el-tooltip>

        <el-tooltip class="item" effect="dark" :content="'删除'" placement="top">
          <el-button type="danger" icon="el-icon-delete" size="small" @click="delMenu(scope.row.id)" circle></el-button>
        </el-tooltip>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  methods: {
    updateMenu(role) {
      this.$emit('update', role)
    },
    delMenu(id) {
      this.$emit('delete', id)
    }
  },
  props: {
    menus: {
      type: Array,
      require: true
    }
  }
}
</script>

<style scoped>

</style>
